<template>
  <div>
    <span v-if="ele.component.type === 'raw'">
      {{ ele.component.value }}
    </span>
    <el-input
      v-if="['text', 'number'].includes(ele.component.type)"
      v-model="eleModelClone[ele.namekey]"
      :placeholder="ele.component.placeholder || ''"
      size="mini"
      :type="ele.component.type"
    >
      <template v-if="ele.unit" slot="append">
        {{ ele.unit || '' }}
      </template>
    </el-input>
    <el-select
      v-if="ele.component.type === 'select'"
      v-model="eleModelClone[ele.namekey]"
      :class="ele.className || ''"
      clearable
      filterable
      :placeholder="ele.component.placeholder"
      size="mini"
    >
      <el-option
        v-for="(item, index) in ele.component.options"
        :key="index"
        :label="item[ele.component.props.label]"
        :value="item[ele.component.props.value]"
      />
    </el-select>
    <el-radio-group
      v-if="ele.component.type === 'radioGroup'"
      v-model="eleModelClone[ele.namekey]"
      size="mini"
    >
      <el-radio-button
        v-for="(item, index) in ele.component.options"
        :key="index"
        :label="item.value"
      >
        {{ item.label }}
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
  import { deepClone } from '@/utils'
  export default {
    name: 'FormEle',
    props: {
      ele: {
        type: Object,
        default() {
          return {}
        },
      },
      eleModel: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        eleModelClone: deepClone(this.eleModel),
      }
    },
    watch: {
      eleModelClone: {
        handler(newVal) {
          this.$emit('updateModel', newVal[this.ele.namekey], this.ele.namekey)
        },
        immediate: true,
        deep: true,
      },
    },
    methods: {},
  }
</script>

<style lang="scss" scoped></style>
